今天要來學一下關於操作陣列(Array)的手法，透過這些方法我們可以更好地操作陣列中的元素以達到需求。

而且我們可以透過在瀏覽器上查看陣列的原型物件了解目前瀏覽器實作出哪些方法供我們使用。

console.log(Array.prototype);

接下來的三篇文章總共會介紹三十個目前 Google 瀏覽器已經實作出來的方法。

為了方便閱讀，所以撰寫的格式基本上會以下圖所示:

就讓我們來一探究竟吧！

Array.prototype.join()

陣列轉字串

arr.join([separator])

• separator:用來隔開陣列中每個元素的字串。如果未傳入此參數，陣列中的元素將預設用英文逗號（「,」）隔開。

Array.prototype.join()

join()方法可以將陣列或者類陣列的所有元素串接並合併成一個字串回傳

而我們也可以自訂元素彼此之間的連接方式

const array = [1,2,'test',4,5];
const string = array.join("-");
// 1-2-test-4-5
console.log(string);

Array.prototype.reverse()

原陣列會改變

會反轉原陣列內的元素

const array = [1,2,3,4,5];
const newArray = array.reverse();
// [5, 4, 3, 2, 1]
console.log(newArray); 

Array.prototype.sort()

原陣列會改變

arr.sort([compareFunction])

• compareFunction: 指定一個函式來定義排序順序。假如省略此參數，陣列將根據各個元素轉為字串後的每一個字元之 Unicode 編碼位置值進行排序。

Array.prototype.sort()

會在原陣列內將元素排序並回傳排序後的陣列。

Ex: 不帶引數時，依照字母排序

const array = ['g','f','a','v','r'];
// ["a", "f", "g", "r", "v"]
console.log(array.sort());

Ex2 : 將陣列內的數字依大小排列

const array = [55,2,7,66,97,66];
const newArray = array.sort(function(param1,param2){
    return param1 - param2;
});
// [2, 7, 55, 66, 66, 97]
console.log(newArray);

Ex3: 不區分大小寫的排序

const array = ['Bug','apple','lion','Cat'];

const newArray = array.sort(function(param1,param2){
    let s = param1.toLowerCase();
    let t = param2.toLowerCase();
    //如果s的字母順位較t的字母順位高，往後排序
    if(s > t) 
        return 1; 
    //如果t的字母順位較s的字母順位高，往前排序
    if(t > s) 
        return -1;
    return;
});
// ["apple", "Bug", "Cat", "lion"]
console.log(newArray);

Array.prototype.unshift()

原陣列會改變

arr.unshift(element1[, ...[, elementN]])

• elementN:欲添加至陣列開頭的元素。

Array.prototype.unshift()

可以將一個或多個元素夾到陣列的開頭，並回傳陣列的新長度

var array = [1,2];
// 5
console.log(array.unshift(4,5,6));
// [4, 5, 6, 1, 2]
console.log(array);

Array.prototype.shift()

原陣列會改變

會移除並回傳陣列的第一個元素。

var array = [4,5,6,7,8];
var delElement = array.shift();
console.log(delElement);
// [5, 6, 7, 8]
console.log(array);

Array.prototype.push()

原陣列會改變

arr.push(element1[, ...[, elementN]])

• elementN:欲添加至陣列末端的元素。

Array.prototype.push()

可以在陣列最後面的位置新增一個或多個元素

var array = [4,5,6,7,8];
array.push('新增的文字'); 
// [4, 5, 6, 7, 8, "新增的文字"]
console.log(array);

Array.prototype.pop()

原陣列會改變

會移除並回傳陣列的最後一個元素。

var array = [4,5,6,7,8];
var delElement = array.pop(); 
// 8
console.log(delElement);
// [4, 5, 6, 7]
console.log(array);

Array.prototype.splice()

原陣列會改變

可刪除或新增元素到陣列中，也可以同時執行這兩件事情

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

• start：指定起始的索引位置
• deleteCount：要刪除的元素數量
• item1,item2：從 start 開始，要加入到陣列的元素。

Array.prototype.splice()

let array =[1,2,3,4,5,6,7,8,9];
// 從索引位置2(包含)刪除4個元素
let newArray = array.splice(2,4); 
// [3,4,5,6]
console.log(newArray);
// [1,2,7,8,9]
console.log(array);

let array2 =[1,2,3,4,5,6,7,8,9];
let newArray2 = array2.splice(2,4,'aa','bb');
// [3,4,5,6]
console.log(array2);
// [1,2,'aa','bb',7,8,9]
console.log(newArray2);

Array.prototype.concat()

回傳新陣列，原陣列不改變

需要合併兩個或多個陣列時使用

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

• valueN: 可以是陣列或值

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

• valueN:陣列以及／或者值，用來合併成一個新的陣列。

Array.prototype.concat()

要注意的是concat()中的引數若是一維陣列，則會將陣列的元素值串接回傳。但若是與二維(或多維)陣列合併的話，則會將裡面的陣列直接一併串接。

let array = [1,2,3];
// [1,2,3,4,5,6]
console.log(array.concat([4,5,6])); 
// [1,2,3,7,8,9,Array(2)];
console.log(array.concat([7,8,9,[10,11]])); 

Array.prototype.slice()

回傳新陣列，原陣列不改變

arr.slice([begin[, end]])

• begin：起始位置(索引位置)
• end：指定陣列結束位置(但不包含end的元素)
• 若是省略end，則會拷貝begin到最後一個元素
• 可使用負數索引，例如:
  • slice(-2) 表示要拷貝陣列的最後兩個元素
  • slice(1,-1) 表示拷貝陣列中的第二個元素至倒數第二個元素

要注意的是在 slice方法中，兩個數字皆為索引值，但是在splice 的第二個參數是**要刪除的元素數量**。

Array.prototype.slice()

const array = [1,2,3,4,5,6,7,8,[9,10]];
// 回傳從索引位置2到索引位置5之前的陣列元素
const newArray = array.slice(2,5);
// [3, 4, 5]
console.log(newArray); 
// 原陣列沒有被修改，所以回傳索引位置2之後至最後一個元素之前的所有元素
const newArray2 = array.slice(2,-1); 
// [3, 4, 5, 6, 7, 8]
console.log(newArray2);

今天先這樣囉，明天繼續介紹陣列的方法~